import QtQuick 2.0
import Sailfish.Silica 1.0
import "./DirectMessagesPage.js" as Js
import "../components"

Page {
    id: page

    allowedOrientations: Orientation.All

    Component.onCompleted: Js.handleReady()
    Component.onDestruction: Js.handleDestroy()
    
    Rectangle {
        anchors.fill: parent
        color: "#313338"

        GlobalFlickable {
            anchors.fill: parent
            Column {
                anchors.fill: parent
                SilicaListView {
                    id: listChannel1View
                    clip: true
                    visible: true
                    width: parent.width
                    height: parent.height - Theme.dp(80) - Theme.paddingMedium * 2
                    header: PageHeader {
                        title: qsTr("Direct Messages")
                    }
                    model: ListModel {
                        id: listModel
                    }
                    delegate: ListItem {
                        menu: contextMenu
                        onClicked: Js.showDMChat(id)
                        contentHeight: Theme.dp(80) + Theme.paddingMedium * 2
                        // ListView.onRemove: animateRemoval(listItem)
                        CircularImage {
                            id: avatar
                            width: Theme.dp(80)
                            anchors {
                                left: parent.left
                                leftMargin: Theme.paddingMedium
                                top: parent.top
                                topMargin: Theme.paddingMedium
                            }
                            source: userAvatar
                        }
                        Label {
                            id: dmAuthor
                            anchors {
                                left: avatar.right
                                leftMargin: Theme.paddingMedium
                                top: avatar.top
                            }
                            font.pixelSize: Theme.fontSizeSmall
                            font.bold : false
                            color: "#FFFFFFFF"
                            text: userName
                        }
                        Label {
                            anchors {
                                left: avatar.right
                                leftMargin: Theme.paddingMedium
                                top: dmAuthor.bottom
                            }
                            font.pixelSize: Theme.fontSizeSmall
                            font.bold : false
                            color: "#FFFFFFFF"
                            text: subText
                        }
                        Component {
                            id: contextMenu
                            ContextMenu {
                                MenuItem {
                                    text: "Profile"
                                }
                            }
                        }
                    }
                }

                SilicaListView {
                    id: listChannel2View
                    clip: true
                    visible: false
                    width: parent.width
                    height: parent.height - Theme.dp(80) - Theme.paddingMedium * 2
                    header: PageHeader {
                        title: qsTr("Channels???")
                    }
                    model: ListModel {
                        id: guildChannelListModel
                    }
                    delegate: ListItem {
                        menu: contextMenu
                        onClicked: Js.showGuildChat(id)
                        contentHeight: Theme.dp(30) + Theme.paddingMedium * 2
                        enabled: itemEnabled
                        opacity: itemEnabled ? 1 : 0.5
                        CircularImage {
                            id: avatar
                            width: Theme.dp(30)
                            anchors {
                                left: parent.left
                                leftMargin: Theme.paddingMedium
                                top: parent.top
                                topMargin: Theme.paddingMedium
                            }
                            source: userAvatar
                        }
                        Label {
                            anchors {
                                left: avatar.right
                                leftMargin: Theme.paddingMedium
                                top: avatar.top
                            }
                            font.pixelSize: Theme.fontSizeSmall
                            font.bold : false
                            color: "#FFFFFFFF"
                            text: channelName
                        }
                        Component {
                            id: contextMenu
                            ContextMenu {
                                MenuItem {
                                    text: "Profile"
                                }
                            }
                        }
                    }
                }

                GuildsListPanel {
                    elementSize: Theme.dp(80)
                    height: Theme.dp(106)
                    spacing: Theme.paddingMedium
                }
            }
        }
    }
}